<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学员选课</title>
<!--    导入-->
    <script src="js/jquery-3.6.0.min.js"></script>
    <style>
        input,label,button{
            font-size: 20px;
            padding: 10px;
            margin: 10px;
        }
        button{
            margin-left: 5%;
            width: 20%;
            border: 1px solid red;
            margin-bottom: 20px;
        }

    </style>
</head>
<body>
<div>
    <div>
        <a href="studentadd.html">新增学员</a>
        <a href="courseadd.html">新增课程</a>
    </div>
    <form id="fm1">
        <div>
            <label>学员id：</label><input type="number" name="sid">
        </div>
        <div>
            <label>课程id：</label>
            <input type="number" name="cid" >
        </div>

        <div><button type="button" onclick="add()">新增选课</button></div>

    </form>
    <div>
        <table border="1" style="width: 80%">
            <thead>
            <tr>
                <th>序号</th>
                <th>学员</th>
                <th>性别</th>
                <th>生日</th>
                <th>所选课程</th>
            </tr>
            </thead>
            <tbody id="tb1">

            </tbody>
        </table>
    </div>
</div>
<script>
    $(function (){
        loadData();
    })
    function add(){
        //页面调用接口 Ajax
        $.post("/api/studentcourse/save.do",$("#fm1").serialize(),function (res){
            if(res.code==200){
                //成功
                alert("OK");
                loadData();
            }else {
                alert("失败");
            }
        })
    }
    function loadData(){
        //请求接口 Ajax
        $.get("api/student/all.do",function (res){
            if(res.code==200){
                $("#tb1").html("");
                for(var i in res.data){
                    var s=res.data[i];
                    var c="<ul>";
                    for(var j in s.courses){
                        c+="<li>课程id:"+s.courses[j].id+"课程名称："+s.courses[j].name+",讲师名称："+s.courses[j].teacher+"</li>";
                    }

                    $("#tb1").append("<tr><td>"+s.id+"</td><td>"+s.name+"</td><td>"+
                        s.sex+"</td><td>"+s.birthday+"</td><td>"+c+"</td></tr>");
                }
            }
        })
    }
</script>
</body>
</html>